const path = require("path");
// 引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const EslintPlugin = require("eslint-webpack-plugin");
const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
  //入口配置---------------------------------------------------------
  entry: path.resolve(__dirname, "../src/index.js"),
  // 出口配置--------------------------------------------------------
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "./js/bundle.js"
  },
  // 加载器---------------------------------------------------------
  module: {
    rules: [{
      test: /\.css$/i,
      // use: ["style-loader", "css-loader"],
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    }, {
      test: /\.less$/i,
      // use: ["style-loader", "css-loader", "less-loader"],
      use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
    }, {
      test: /\.(png|jpg|gif|webp)$/,
      //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
        },
      },
      generator: {
        filename: 'images/[name][ext]'
      }
    },
    ],
  },
  //优化的配置------------------------------------------------------
  optimization: {
  minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  // 插件的配置--------------------------------------------------------
  plugins: [
  new MiniCssExtractPlugin({
    filename: "./css/main.css"
  }), 
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname,"../public/index.html"),
    filename: "index.html",
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
    }
  }), 
  new EslintPlugin({
    fix: true
  }), 
  new CopyWebpackPlugin({
    patterns: [{
      from: path.resolve(__dirname, "../public"),
      to: "public",
      //配置复制时忽略的文件
      globOptions: {
        ignore: ["**/index.html"]
      }
    }],
  }),],

  // 模式 ---------------------------------------------------------------------
  mode: "production"
};